<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag File</title>
    <style type="text/css">
        #content {
            width: 500px;
            height: 500px;
            border: 2px solid gainsboro;
        }
    </style>

</head>

<body>
    <div ondrop="drop(event);" ondragover="allowDrop(event);" id="content"></div>
    <script>
        function allowDrop(ev) {
            ev.preventDefault()
        }

        function drop(ev) {
            ev.preventDefault()
            const files = ev.dataTransfer.files
            console.info('files', files)
            /*
             0: File {name: "1-2-arraybuffer-to-blob.js", lastModified: 1611728894565, lastModifiedDate: Wed Jan 27 2021 14:28:14 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 467, …}
             1: File {name: "1-3-arraybufferview-to-blob.js", lastModified: 1611729150973, lastModifiedDate: Wed Jan 27 2021 14:32:30 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 358, …}
            */
            console.info('files', files instanceof FileList) // true
        }
    </script>
</body>

</html>